<template>
	<div id="trackPageMain">
		<div id="trackMapContainer"></div>
		<div class="trackList">
			<div class="title">只显示近15天活动轨迹</div>
			<div class="playButton" @click="playTrack_click">重新播放轨迹</div>
			<div class="item" v-for="(item,index) in track" :key="index" @mouseenter="trackItem_enter(index)" @mouseleave="trackItem_out(index)">
				<div class="left">
					{{index+1}}
				</div>
				<div class="right">
					场所：<b>{{item.place}}</b><br/>
					地点：{{item.address}}<br/>
					时间：{{item.time}}<br/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Track",
		data() {
			return {
				map: null, //地图对象
				headMarkerLayer: null, //头像图层
				pointMarkerLayer: null, //标点图层
				mapCenter: { lat: 26.620058, lng: 106.676155 }, //地图中心

				//列表数据
				track: [
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" },
					{ time: "2022-4-12 12:34:23", address: "贵州省贵阳市云岩区渔安新城", place: "XXX洗浴中心" }
				],

				//地图轨迹数据
				path : [
					new TMap.LatLng(26.620058, 106.676155),
					new TMap.LatLng(26.610609, 106.671356),
					new TMap.LatLng(26.609381, 106.673363),
					new TMap.LatLng(26.59042, 106.695778),
					new TMap.LatLng(26.598089, 106.715004),
					new TMap.LatLng(26.584982, 106.709862),
					new TMap.LatLng(26.583546, 106.725655),
					new TMap.LatLng(26.5714, 106.719803),
					new TMap.LatLng(26.569, 106.711548),
					new TMap.LatLng(26.55703, 106.70311),
					new TMap.LatLng(26.56226, 106.694344)
				]
			};
		},

		mounted: function () {
			let _this = this;
			setTimeout(() => {
				_this.initMap()
				_this.mapTrack();
				_this.addPoint();
			}, 4000)
		},

		methods: {

			//初始化地图
			initMap: function () {
				let center = new TMap.LatLng(this.mapCenter.lat, this.mapCenter.lng);
				this.map = new TMap.Map(document.getElementById("trackMapContainer"), {
					center: center, //设置地图中心点坐标
					zoom: 13, //设置地图缩放级别
				});
			},

			//画轨迹
			mapTrack: function () {

				let map = this.map;
				let path =  this.path;

				/****** 画轨迹线 *******/
				let polylineLayer = new TMap.MultiPolyline({
					map,
					styles: {
						style_blue: new TMap.PolylineStyle({
							color: '#334960', // 线填充色
							width: 4, // 折线宽度
							borderWidth: 2, // 边线宽度
							borderColor: '#FFF', // 边线颜色
							lineCap: 'round', // 线端头方式
							eraseColor: 'rgba(190,188,188,1)', //线条经过的颜色
						}),
					},
					geometries: [
						{
							id: 'erasePath',
							styleId: 'style_blue',
							paths: path,
						},
					],
				});
				
				/****** 画人 *******/
				let headMarker = new TMap.MultiMarker({
					map,
					styles: { //样式设置
						'head-down': new TMap.MarkerStyle({
						'width': 40,  //图片宽度（像素）
						'height': 40, //高度
						'anchor': {   //图片中心的像素位置
							x: 20,y: 20,
						},
						'faceTo': 'map',  //取’map’让头相贴于地面
						'rotate': 0,    //初始头像朝向（正北0度，逆时针一周为360度，180为正南）
						'src': '/image/ico02.png',   //头像图片
						})
					},
					geometries: [{    //头像的位置信息
						id: 'head',      //因MultiMarker支持包含多个点标记，因此要给头像一个id
						styleId: 'head-down',    //绑定样式
						position: path[0],//初始坐标位置
					}]
				});
				
				//调用moveAlong，实现头像移动
				headMarker.moveAlong({ 
						"head": { //设置让"头像"沿"path"移动
							path,
							speed: 1000 //速度：公里/小时
						}
					}, {
						autoRotation: false   //不沿路线自动旋转
					}
				)

				//擦除已经过的线条
				headMarker.on('moving', (e) => {
					var passedLatLngs = e.head && e.head.passedLatLngs;
					if (passedLatLngs) {
					polylineLayer.eraseTo(
						'erasePath',
						passedLatLngs.length - 1,
						passedLatLngs[passedLatLngs.length - 1]
					);
					}
				});

				this.headMarkerLayer = headMarker;
			},

			//添加标点
			addPoint: function () {
				
				let map = this.map;
				let path =  this.path;

				//创建并初始化MultiMarker
				let markerLayer = new TMap.MultiMarker({
					map: map,  //指定地图容器
					//样式定义
					styles: {
						//创建一个styleId为"styleRed"的样式（styles的子属性名即为styleId）
						"styleRed": new TMap.MarkerStyle({ 
							"width": 25,  // 点标记样式宽度（像素）
							"height": 35, // 点标记样式高度（像素）
							"src": '/image/ico03.png',  //图片路径
							//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
							"anchor": { x: 16, y: 32 }  
						}),
						//创建一个styleId为"styleBlue"的样式（styles的子属性名即为styleId）
						"styleBlue": new TMap.MarkerStyle({ 
							"width": 25,  // 点标记样式宽度（像素）
							"height": 35, // 点标记样式高度（像素）
							"src": '/image/ico04.png',  //图片路径
							//焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
							"anchor": { x: 16, y: 32 }  
						}) 
					}
				});

				for (let i=0; i<path.length; i++){
					markerLayer.add({
						"id": i,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
						"styleId": 'styleRed',  //指定样式id
						"position": path[i],  //点标记坐标位置
						}
					);
				}

				this.pointMarkerLayer = markerLayer;
			},

			//鼠标移动列表上，标点换成蓝色
			trackItem_enter: function(index){
				let path =  this.path;
				this.pointMarkerLayer.updateGeometries([
					{
						"styleId":"styleBlue",
						"id": index,
						"position": path[index],
					}
				]);
			},

			//鼠标离开列表，标点换成红色
			trackItem_out: function(index){
				let path =  this.path;
				this.pointMarkerLayer.updateGeometries([
					{
						"styleId":"styleRed",
						"id": index,
						"position": path[index],
					}
				]);
			},

			//重新播放轨迹
			playTrack_click: function(){
				//调用moveAlong，实现头像移动
				let path =  this.path;
				this.headMarkerLayer.moveAlong({ 
						"head": { //设置让"头像"沿"path"移动
							path,
							speed: 1000 //速度：公里/小时
						}
					}, {
						autoRotation: false   //不沿路线自动旋转
					}
				)
			}
		},

	};
</script>

<style>
	#trackPageMain{
		display: flex;
		height: 600px;
	}

	#trackMapContainer{
		flex: 1;
	}

	#trackPageMain > .trackList{
		width: 300px;
		padding: 0px 0px 0px 10px;
		overflow:scroll;
	}

	#trackPageMain > .trackList > .title{
		font-size: 0.9rem;
		text-align: center;
		font-weight: bold;
	}

	#trackPageMain > .trackList > .playButton{
		background-color: #ecf5ff;
		border: solid 1px #b3d8ff;
		width: fit-content;
		padding: 5px 10px 5px 10px;
		border-radius: 3px;
		margin: 10px auto 10px auto;
		cursor: pointer;
		color: #409eff;
		font-size: 0.9rem;
	}

	#trackPageMain > .trackList > .playButton:hover{
		background-color: #e0efff;
	}

	#trackPageMain > .trackList > .item{
		font-size: 0.7rem;
        padding: 10px;
		border-bottom: solid 1px #e0e0e0;
		display: flex;
		align-items: center;
		cursor: default;
		line-height: 150%;
	}

	#trackPageMain > .trackList > .item:hover{
		background-color: #ecf5ff;
	}

	#trackPageMain > .trackList > .item > .left{
		width: 30px;
		font-size: 1rem;
		color: #a0a0a0;
	}

	#trackPageMain > .trackList > .item > .right{
		flex: 1;
	}

</style>